Questions
2 of 13
1Discuss useActionState hook.
2Discuss useFormStatus hook.
3Discuss useOptimistic hook.
4Discuss useTransition hook.
5what is startTransition and how is it different from useTransition?
6Describe useLayoutEffect and compare it with useEffect.
7Discuss useDebugValue hook.
8Discuss useDeferredValue hook.
9Discuss useEffectEvent hook.
10Describe useId hook.
11Describe useImperativeHandle hook.
12Discuss useInsertionEffect hook.
13Describe useSyncExternalStore hook.
reactreact
Basics
JSX
Virtual DOM
Reconciliation
State and Props
Components
Class Components
Function Components
Lifecycle functions
Code Sharing
Hooks
useState
useReducer
useMemo
useContext
useCallback
useEffect
Custom Hooks
New Hooks
HOC
Refs
Data Sharing
Events
Context API
Redux
Router
CSR-SSR
React APIs
Performance Optimisation
ReactDOM
Strict Mode
Security
02 / 13

Discuss useFormStatus hook.

useFormStatus is a Hook that gives you status information of the last form submission.

  1. 1

    useFormStatus does not take any parameters.

  2. 2

    it must be called from a component that is nested inside the <form>.

  3. 3

    useFormStatus solves prop drilling. It allows your SubmitButton to be smart and know when its parent form is submitting without needing any props(as with useActionState) passed to it.

  4. 4

    useFormStatus will only return pending: true if it is rendered inside the <form> tags. If you put it in the same component as the <form>, it won't work because it can't see the parent it is currently part of.

  5. 5

    useFormStatus also provides the data (a FormData object) being sent. This is great for Optimistic UI (showing the user what they just typed before the server even responds).

It returns a status object with the following properties:
  1. 1

    pending: A boolean. If true, this means the parent <form> is pending submission. Otherwise, false.

  2. 2

    data: An object implementing the FormData interface that contains the data the parent <form> is submitting. If there is no active submission or no parent <form>, it will be null.

  3. 3

    method: A string value of either 'get' or 'post'. This represents whether the parent <form> is submitting with either a GET or POST HTTP method. By default, a <form> will use the GET method and can be specified by the method property.

  4. 4

    action: A reference to the function passed to the action prop on the parent <form>. If there is no parent <form>, the property is null. If there is a URI value provided to the action prop, or no action prop specified, status.action will be null.

javascript